<template>
  <div class="person">
    <div class="nav-header">
      人员信息
    </div>

    <div class="nav-search">
      <div class="base-search">
        <div class="search-item">
          <span>姓名：</span>
          <div class="medium-input">
            <el-input v-model="search.name" placeholder="姓名" maxlength="5" size="small"></el-input>
          </div>
        </div>
        <div class="search-item">
          <span>学号(工号)：</span>
          <div class="medium-input">
            <el-input v-model="search.number" placeholder="工号" maxlength="11" size="small"></el-input>
          </div>
        </div>
        <div class="search-item">
          <span>学院：</span>
          <div class="medium-select">
            <el-select v-model="search.college" size="small" clearable>
              <el-option v-for="(cge, idx) in colleges" :key="idx"
                         :value="cge">{{cge}}</el-option>
            </el-select>
          </div>
        </div>
        <div class="search-item">
          <span>职位：</span>
          <div class="min-select">
            <el-select v-model="search.stu" size="small" clearable>
              <el-option :value="1" label="学生">学生</el-option>
              <el-option :value="0" label="老师">老师</el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>

    <div class="nav-table" v-loading="loading">
      <el-table :data="persons" height="calc(100vh - 260px)"
                border size="medium">
        <el-table-column type="index"
                         label="序号"
                         width="50">
        </el-table-column>
        <el-table-column prop="name"
                         label="姓名"
                         width="90">
        </el-table-column>
        <el-table-column prop="number"
                         label="工号"
                         width="130">
        </el-table-column>
        <el-table-column prop="tel"
                         label="电话"
                         width="130">
        </el-table-column>
        <el-table-column label="职位">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.stu" size="small" type="info">学生</el-tag>
            <el-tag v-else size="small" type="warning">老师</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sex"
                         label="性别"
                         width="80">
        </el-table-column>
        <el-table-column prop="college"
                         label="学院">
        </el-table-column>
        <el-table-column prop="specialty"
                         label="专业">
        </el-table-column>
        <el-table-column prop="clazz"
                         label="班级">
        </el-table-column>
      </el-table>
    </div>

    <div class="nav-pagination">
      <el-pagination
          :current-page.sync="search.page"
          :page-size="search.size"
          layout="total, prev, pager, next"
          :total="totalElements">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Peoples",
    data() {
      return {
        search: {
          page: 1,
          size: 14,
          name: '',
          number: '',
          college: '',
          stu: '',
        },
        totalElements: 0,
        persons: [],
        colleges: [],
        loading: false
      }
    },
    watch: {
      search: {
        deep: true,
        handler(nv, ov) {
          this.getPage()
        }
      }
    },
    methods: {
      getPage() {
        this.loading = true
        this.$axios.get('/person/page', {params: this.search}).then(rs => {
          let page = rs.data.payload
          this.persons = page.content
          this.totalElements = page.totalElements
        }).catch(err => {
          this.persons = []
          this.totalElements = 0
        }).finally(e => {
          this.loading = false
        })
      },

      getColleges() {
        this.$axios.get('/person/colleges').then(rs => {
          this.colleges = rs.data.payload
        })
      }
    },
    created() {
      this.getPage()
      this.getColleges()
    }
  }
</script>

<style scoped>

</style>